<template>
	<view class="content">
		<view class="positioning" @click="getLocationInfo">
			<view class="left">
				<text>东莞东城区</text>
				<u-icon name="arrow-down-fill" size="16"></u-icon>
			</view>
			<view class="right">
				<u-icon name="question-circle" size="30"></u-icon>
				<text>28°C</text>
			</view>
		</view>
		<view class="title">
			<image src="" mode=""></image>
			<view class="title-info">
				<view style="font-weight: 700;
font-size: 32rpx;margin-bottom: 24rpx;">
					旗峰雅苑停车场
				</view>
				<text>车位号:B32</text>
			</view>
		</view>
		<view class="order-info">
			<view class="orderInfo-item">
				<text>订单号</text>
				<view class="">
					<view>66235527489723384</view>
					<image src="../../static/parkingLot/ico_xl1.png" mode=""></image>
				</view>
			</view>
			<view class="orderInfo-item">
				<text>预约人</text>
				<view class="">
					王先生( 冀56558A )
				</view>
			</view>
			<view class="orderInfo-item">
				<text>停车时长</text>
				<view class="">
					王先生( 冀56558A )
				</view>
			</view>
			<view class="orderInfo-item">
				<text>费用</text>
				<view style="color: #FE6000;">
					20元
				</view>
			</view>
			<view class="orderInfo-item">
				<text>担保费</text>
				<view class="">
					10元
				</view>
			</view>
			<view class="orderInfo-item">
				<text>预约时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>入场时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>出场时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>支付时间</text>
				<view class="">
					2023-07-0608:32:00
				</view>
			</view>
			<view class="orderInfo-item">
				<text>支付方式</text>
				<view class="">
					微信
				</view>
			</view>
		</view>
		<view class="u-but">
			<view style="background: #FE6000;">
				取消预约
			</view>
			<view style="background: #1677FE;">
				立即支付
			</view>
			<view style="background: #05C160;padding: 20rpx 72rpx;">
				导航
			</view>
		</view>
		<view class="up">
			<image src="../../static/user/ico_gzsb.png" mode=""></image>
			<text>异常上报</text>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.content {
		padding: 24rpx;

		.positioning {
			padding: 5rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;

			.left {
				text {
					margin-right: 16rpx;
				}
			}

			.right {
				text {
					margin-left: 16rpx;
				}
			}

		}
		.title{
			display: flex;
			border: 1rpx solid #CCCCCC;
			box-shadow: 0 6rpx 20rpx 0 #99999933;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 24rpx 0;
			.title-info{
				margin-left: 24rpx;
			}
			image{
				width: 220rpx;
				height: 160rpx;
				background: #C8C7CC;
			}
		}
		.order-info{
			border: 1rpx solid #CCCCCC;
			box-shadow: 0 6rpx 20rpx 0 #99999933;
			border-radius: 16rpx;
			line-height: 77rpx;
			padding: 22rpx 24rpx;
		}
		.orderInfo-item {
			display: flex;
			justify-content: space-between;
		
			text:nth-of-type(1) {
				color: #999999;
			}
		
			view {
				display: flex;
				align-items: center;
			}
		
			image {
				display: block;
				width: 28rpx;
				height: 28rpx;
				margin-left: 16rpx;
			}
		
			.in-detail {
				width: 480rpx;
				line-height: 50rpx;
			}
		}
		.u-but{
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin: 60rpx 0;
			view{
				color: #fff;
				font-size: 28rpx;
				padding: 20rpx 44rpx;
				border-radius: 8rpx;
			}
		}
		.up{
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				display: block;
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>